מה חדש באתר

קל לארגן דפים בעזרת אוספים אפשר לשמור ולסווג תוכן על סמך ההעדפות שלך.

Rachel Andrew

תאריך פרסום: 20 במאי 2025

בכנס Google I/O 2025, בנאום המרכזי בנושא 'מה חדש באינטרנט', שיתפו את כל ההכרזות על Baseline, וגם הצגנו רק חלק מהתכונות שהצטרפו ל-Baseline השנה. זו הייתה שנה מדהימה לאינטרנט ול-Baseline, והפוסט הזה הוא סיכום של כל מה שצוין, עם כל הקישורים למידע נוסף.

לוח הבקרה של פלטפורמת האינטרנט ותכונות האינטרנט

בשנת 2024 הכרזנו על ההשקה הראשונית של מרכז הבקרה של פלטפורמת האינטרנט, שמשתמש בקבוצת הנתונים של תכונות האינטרנט ומאפשר לכם לבחון את כל התכונות שנכללות ב-Baseline.

נתוני התכונות של האתר הושלמו, וכל התכונות של הפלטפורמה ממופות. בכל חודש מצטרפות תכונות חדשות ל-Baseline, הנתונים מתעדכנים וכל זה מוצג בלוח הבקרה.

כלים שיעזרו לכם למצוא את היעד שלכם לנתונים בסיסיים

אפשר לבסס את מדיניות התמיכה בדפדפנים על היעד המשתנה של 'זמין באופן נרחב' – כמו הסוכנות Clearleft בבריטניה – אבל אפשר גם להשתמש ביעד קבוע שמבוסס על שנת Baseline. עכשיו אפשר להשתמש בנתוני המשתמשים שלכם, יחד עם נתוני התכונות באתר, כדי לזהות את היעד הטוב ביותר בשבילכם.

בשנה שעברה ב-I/O הודענו ש-RUMvision תשלב את Baseline במוצר שלה, והשילוב הזה פעיל עכשיו.

הכלי הזה משתמש בנתוני ה-RUM שלכם, ולכן הוא עוזר לכם לזהות את שנת הבסיס שהכי מתאימה לכם על סמך הנתונים האלה, ולא על סמך ממוצע גלובלי. כך תוכלו גם להבין אם כדאי לכם להשתמש ב-Baseline Widely available.

אתם יכולים גם להשתמש בנתונים מ-Google Analytics כדי לראות בבירור מהו אחוז המשתמשים שתומכים בכל יעד בסיס באמצעות כלי הבדיקה של Google Analytics לבדיקת נתוני בסיס החדש.

אלה רק שניים מתוך אוסף הולך וגדל של כלים שעוזרים למפות את נתוני המשתמשים האמיתיים ל-Baseline.

קבוצת הקהילה Web DX השיקה לאחרונה תוסף ל-Netlify שמציג תמיכה בשנים שונות של Baseline וזמין באתרים רבים. התוסף הזה יעזור לכם להחליט לאילו יעדים לטרגט את כלי ה-build. בקרוב נוסיף שילובים עם המוצר Observatory RUM של Cloudflare ועם Contentsquare.

שילוב הנתונים עם הכלים שלכם

הנתונים של תכונות האינטרנט פתוחים וזמינים לשילובים שלכם. אנחנו מנסים להקל על כך.

אפשר להשתמש ב-Web Platform Dashboard API או לצרוך את נתוני web-features ישירות מחבילת ה-npm.

עכשיו אפשר למפות גרסאות דפדפן ליעד בסיס באמצעות המודול baseline-browser-mapping מקבוצת הקהילה W3C WebDX. אפשר להשתמש במודול הזה בסביבת JavaScript בצד השרת, או על ידי הורדת קובצי JSON או CSV שמתעדכנים מדי יום מהמאגר.

הנתונים האלה כוללים מיפויים לא רק של קבוצת הדפדפנים הבסיסית, אלא גם של דפדפנים משניים כמו Samsung Internet,‏ Opera,‏ UC Browser ו-Android Webview.

איך בודקים אם תכונות מסוימות נתמכות ביעד הבסיסי

המידע הבסיסי מופיע עכשיו ברוב הדפים של MDN ו-Can I Use, ואפשר למצוא אותו גם בלוח הבקרה של Web Platform ובמאמרים ב-web.dev וב-CSS Tricks. עם זאת, כדי לעשות את כל זה צריך לחפש תמיכה. יהיה הרבה יותר שימושי אם נתוני Baseline יוצגו בסביבת הפיתוח המשולבת (IDE) בזמן הכתיבה של הקוד, וכחלק מכל הכלים האחרים שבהם אתם משתמשים.

אנחנו שמחים לבשר לכם שכלי מפתח רבים כוללים עכשיו תמיכה מובנית ב-Baseline, או שאפשר לשלב אותם בקלות.

browserslist-config-baseline

כלים רבים, כמו Babel ו-PostCSS, משתמשים ב-browserslist כדי לקבוע באילו דפדפנים לתמוך.

יחד עם קבוצת WebDX CG וחברי הקהילה, צוות Chrome עזר להשיק כלי חדש שנקרא browserslist-config-baseline. כך תוכלו להגדיר את היעדים של רשימת הדפדפנים במונחים של Baseline, כמו 'זמין באופן נרחב' או 'שנים של Baseline'.

בעזרת האפשרות הזו, כל כלי שמקבל יעד של רשימת הדפדפנים יכול עכשיו להביע אותו במונחים של Baseline.

מידע נוסף זמין במאמר שימוש ב-Baseline עם browserslist.

קו בסיס ב-linters – ESLint ו-Stylelint

לאחרונה נוספו כמה כלים חדשים ל-Baseline עם linters, כולל ESLint ל-CSS, שמאפשרים להשתמש ב-Baseline עם linters.

ל-ESLint יש כלל use-baseline. אפשר להגדיר את התכונה הזו ליעד הבסיסי המועדף, והיא תתריע כשמשתמשים בתכונות חדשות יותר מהיעד. אתם יכולים לבחור איך לטפל באזהרות האלה: להחליף את התכונה הזו ברכיבים בסיסיים או לדכא את האזהרה של ה-linter. זהו פתרון תקף לחלוטין אם אתם יודעים שאתם משתמשים בתכונה מתקדמת בצורה בטוחה, למשל אם מדובר בשיפור הדרגתי.

כברירת מחדל, ESLint לא יוצג אזהרה אם נעשה שימוש בתכונות חדשות יותר בתוך בלוקים של @supports, כי דפדפנים שלא נתמכים לא יעריכו אותן בכל מקרה.

לצורכי איתור שגיאות בקוד HTML, יש גם פלאגין קהילתי שנקרא html-eslint.

Stylelint תומך באופן רשמי בפלאגין שנקרא stylelint-plugin-use-baseline. הכלל הזה מתנהג בדיוק כמו הכלל של ESLint ל-CSS, אבל הוא פועל במקום זאת ב-Stylelint.

לחלק גדול מהכלי לזיהוי שגיאות בקוד יש גם יישומי פלאגין ל-IDE, כך שאפשר לקבל משוב מיידי על סטטוס הבסיס בזמן הכתיבה באמצעות קווים מקווקווים מתחת לטקסט.

ערך בסיס ב-VS Code וב-JetBrains WebStorm

כבר מזמן יש תמיכה בסביבות פיתוח משולבות רבות באפשרות להעביר את העכבר מעל תכונה מסוימת בכלי העריכה ולראות את רשימת גרסאות הדפדפנים הנתמכות.

עם זאת, יכול להיות שיהיה קשה להבין אם השימוש בתכונה הזו בטוח בפועל – צריך לבדוק אם יש דפדפנים מרכזיים חסרים ברשימה הזו, וכמה חדשה הגרסה של הדפדפן.

כדי לפתור את הבעיה הזו, ייצרנו שותפות עם סביבת הפיתוח המשולבת (IDE) הפופולרית ביותר שמשמשת מיליוני מפתחי אינטרנט, VS Code, כדי לשלב את נתוני Baseline ישירות בכרטיסי הה hover.

מעכשיו אפשר להעביר את העכבר מעל תכונה מסוימת כדי לדעת אם היא נחשבת לתכונה בסיסית ולמשך כמה זמן, או אם יש דפדפנים מרכזיים שעדיין לא הטמיעו אותה באופן מלא.

התכונות הנתמכות כוללות מאפייני CSS, רכיבי HTML ומאפייני HTML. מידע נוסף זמין במאמר Visual Studio Code תומך עכשיו ב-Baseline.

בעקבות השילוב הזה, כל סביבת פיתוח משולבת (IDE) שמבוססת על VS Code תוכל ליהנות מהכרטיסים האלה.

בנוסף, אנחנו יכולים להודיע ש-JetBrains מטמיעה כרטיסי מידע ב-hover ב-WebStorm JavaScript וב-TypeScript IDE.

האינטרנט משתפר מהר יותר מאי פעם

אנחנו מקווים ש-Baseline יעזור לכם לנצל את העובדה שהאינטרנט עם יכולת הפעולה ההדדית משתפר מהר יותר מאי פעם.

בלוח הבקרה של פלטפורמת האינטרנט אפשר לראות את כל התכונות שהפכו לתכונות רגילות ב-12 החודשים האחרונים, מאז Google I/O 2024.

יש גם כמה תכונות שאפשר להיות בטוחים שהן יהיו זמינות בקרוב מאוד, כי הן כלולות בפרויקט Interop 2025. תוכלו לקרוא על כל התכונות הכלולות במאמר Interop2025: עוד שנה של שיפורים בפלטפורמת האינטרנט.

מצבי כתיבה בפריסה לרוחב

כבר ראינו תכונה אחת שהפכה ל'בסיס חדש': הערכים sideways-rl ו-sideways-lr של מאפיין ה-CSS writing-mode. אם אתם משתמשים במצב כתיבה אנכי למטרות פריסה בלבד, סביר להניח שעדיף להשתמש בערכים האופקיים.

h1 {
  writing-mode: sideways-rl;
}

h2 {
  writing-mode: sideways-lr;
}

מיקום נקודת העיגון

מיקום של נקודות עיגון שוחרר ב-Chrome 125. היא מאפשרת לקשר את המיקום של רכיב לאינטראקציה, למשל כשפותחים הסבר קצר באמצעות לחצן.

הוא נכלל עכשיו ב-Interop 2025, כך שצפוי להצטרף ל-Baseline השנה.

מדדי הליבה לבדיקת חוויית המשתמש באתר: LCP ו-INP

LCP API

Event Timing API (ל-INP)

מדדי Web Vitals יכולים לעזור לכם לכמת מדדים שקשורים לחוויית המשתמש באתר ולזהות הזדמנויות לשפר אותה. מטרת היוזמה של Web Vitals היא לפשט את התמונה הכוללת ולעזור לאתרים להתמקד במדדים שהכי חשובים, מדדי הליבה לבדיקת חוויית המשתמש באתר.

Interop 2025 כולל את המדדים Largest Contentful Paint‏ (LCP) ו-Interaction to Next Paint‏ (INP), באמצעות הטמעה של ממשק ה-API LargestContentfulPaint ושל Event Timing API בדפדפנים שונים.

שיפורים ברכיב <details>

הרכיב <details> עצמו כבר זמין ברמת Baseline באופן נרחב. הוא נכלל ב-Interop 2025 כי יש כמה תכונות שבעזרתן ווידג'טים של גילוי נאות עם <details> שימושיים יותר.

אלמנט <details> מכיל אלמנט <summary>, שהוא החלק שגלוי בדף כשאלמנט <details> מכווץ. מחוץ ל-<summary> נמצא התוכן של הרכיב <details>, והוא מוסתר עד שהמשתמש לוחץ על הסיכום.

אחד מהדברים שאנחנו עובדים עליהם במהלך Interop 2025 הוא הסתרת התוכן באמצעות content-visibility במקום display, כלומר אם לא תרחיבו את התוכן, הוא לא יוצג בכלל.

חלק מהעבודה ב-Interop 2025 הוא גם פסאודו-הרכיב ::marker. באמצעות רכיב הסימון המשנה ::marker אפשר לעצב את המשולש של האלמנט <summary>.

summary::marker {
  content: "+ ";
  font-family: monospace;
  color: red;
  font-weight: bold;
}

לאחר מכן, עוד פסאודו-רכיב – ::details-content.

::details-content מייצג את התוכן – החלק ברכיב הפרטים שמתרחב ונסגר ומאפשר לכם לעצב אותו.

[open]::details-content {
  border: 5px dashed hotpink;
}

יש גם כמה שיפורים נחמדים, כמו הרחבה אוטומטית של האלמנט <details> עם התאמות שאפשר למצוא בדף, והעברת הערך until-found של מאפיין ה-HTML hidden ל-Baseline Newly available. כך אפשר להסתיר אלמנט עד שהוא נמצא באמצעות חיפוש הדף בדפדפן, או עד שמנווטים אליו ישירות דרך קטע של כתובת URL.

CSS @scope

הכלל @scope ב-CSS מאפשר להגביל את פוטנציאל החשיפה של הסלקטורים. כשמגדירים עץ בסיס להיקף באמצעות @scope, כל כללי הסגנון שמתמקמים בתוך כלל at חלים רק על עץ ה-DOM הזה.

לדוגמה, אם רוצים לטרגט רק אלמנטים מסוג <img> בתוך רכיב עם סיווג .card, אז .card יהפוך לשורש ההיקף.

@scope (.card) {
    img {
        border-color: green;
    }
}

מידע נוסף זמין במאמר הגבלת ההיקף של הסלקטורים באמצעות כלל ה-at-rule ‏ @scope ב-CSS.

scrollend

תכונה נוספת שמפחיתה את המורכבות ומשפרת את ממשקי הגלילה היא scrollend. בלי האירוע scrollend, אין דרך מהימנה לזהות שגלילה הושלמה.

// before scrollend
document.onscroll = event => {
  clearTimeout(window.scrollEndTimer)
  window.scrollEndTimer = setTimeout(callback, 100)
}

בעזרת האירוע scrollend, הדפדפן מבצע בשבילכם את כל ההערכות הקשות האלה.

document.onscrollend = event => {…}

דוגמאות נוספות זמינות במאמר Scrollend, אירוע JavaScript חדש.

מעברים בין תצוגות של אותו מסמך

לסיום, אבל לא פחות חשוב, מעברים בין תצוגות הם חלק מ-Interop 2025. העבודה כוללת מעברים בין תצוגות באותו מסמך, כך שגם אלה של אפליקציות דף יחיד וגם אלה של כיתות של מעברי תצוגה.

כדי לעקוב אחרי התקדמות הפרויקט במהלך השנה, תוכלו להיכנס ללוח הבקרה של Interop 2025.

התכונות שכלולות ב-Interop 2025 לא יהיו היחידות שיהפכו לחלק מ-Baseline השנה, אבל ההכללה שלהן בפרויקטים היא סימן טוב למדי לכך שהן מקבלות עדיפות ויגיעו בקרוב.

וזו רק ההתחלה

זו הייתה שנה מרגשת ל-Baseline, ועשינו דרך ארוכה מאז ההכרזות שלנו בשנה שעברה. עכשיו סיימנו את מילוי החסר בנתוני מאפייני האתר. כך נפתחה הדלת ליצירת כלים למפתחים. אנחנו רק בתחילת הדרך, ואם יש לכם מוצר או כלי בקוד פתוח שיכולים להפיק תועלת מהכללת הנתונים האלה, נשמח לשמוע מכם.

כדאי לעקוב אחרי web.dev כי נמשיך לפרסם הודעות על כלים חדשים יחד עם מדריכים שיעזרו לכם לנצל את כל מה שהאינטרנט מציע.